﻿<!DOCTYPE HTML>
<html>
<head>
	<title>网页截图&批注(10行代码搞定。支持平板touch)</title>
	<script type="text/javascript" src="./js/jquery-1.7.2.min.js"></script>
	<script src="./js/jquery.jqscribble.js" type="text/javascript"></script>
	<script src="./js/jqscribble.extrabrushes.js" type="text/javascript"></script>
	<script type="text/javascript" src="./js/html2canvas.js"></script>
	<script type="text/javascript">
		$(function(){
			html2canvas(document.body, {
				  onrendered: function(canvas) {
				    document.body.appendChild(canvas);
				    $('#cont').hide();
				    $("canvas").jqScribble({brushColor:'#f00',backgroundImage:canvas.toDataURL()});
				  }
			});			
		});
	</script>
	<style>
		body{padding:0px;margin:0px;}
		canvas{-ms-touch-action: none; }/*win8 平板ie10中必须加这行才能批注*/
	</style>
</head>
<body>
	<div style="height:auto;text-align:center" id="cont">
		<div style="width:1024px;margin:auto;">
			<h1>网页截图&批注测试</h1>
			<h1>网页截图&批注测试</h1>
			<h1>网页截图&批注测试</h1>
			<h1>网页截图&批注测试</h1>
			<h1>网页截图&批注测试</h1>
			<h1>网页截图&批注测试</h1>
			<h1>网页截图&批注测试</h1>
			<h1>网页截图&批注测试</h1>
			<h1>网页截图&批注测试</h1>
			<h1>网页截图&批注测试</h1>
			<h1>网页截图&批注测试</h1>
			<h1>网页截图&批注测试</h1>
			<h1>网页截图&批注测试</h1>
			<h1>网页截图&批注测试</h1>
			<h1>网页截图&批注测试</h1>
			<h1>网页截图&批注测试</h1>
			<h1>网页截图&批注测试</h1>
			<h1>网页截图&批注测试</h1>
		</div>
	</div>
</body>
</html>